<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>时间轴</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        body,
        ul,
        p,
        h1,
        h2 {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .content {
            width: 100%;
            min-height: 720px;
            padding: 50px 0;
            background: #3a3c48 url(images/content-bg.png);
        }
        
        .content .wrapper {
            position: relative;
            width: 960px;
            background: url(images/release-bg.png) no-repeat right top;
            margin: 0 auto;
        }
        
        .content .light {
            position: absolute;
            left: 55px;
            top: -50px;
            width: 152px;
            height: 191px;
            background: url(images/light-top.png) no-repeat top center;
        }
        
        .content .light i {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            background: url(images/light.png) no-repeat top center;
        }
        
        .content hr {
            height: 0;
            border-left: none;
            border-right: 0;
            border-top: 1px dashed #2d2f34;
            border-bottom: 1px dashed #474954;
        }
        
        .content .line-left {
            position: absolute;
            left: 0;
            top: 15px;
            width: 70px;
        }
        
        .content .line-right {
            position: absolute;
            right: 0;
            top: 15px;
            width: 460px;
        }
        
        .content .main {
            background: url(images/line-bg.png) repeat-y 249px 0;
        }
        
        .content .main .title {
            position: absolute;
            line-height: 40px;
            padding-left: 67px;
            left: 230px;
            top: 0;
            color: #58a6fb;
            font-size: 24px;
            background: url(images/clock.png) no-repeat left top;
        }
        
        .content .main .year {
            position: relative;
            z-index: 100;
        }
        
        .content .main .year h2 {
            width: 170px;
            height: 40px;
            padding-right: 30px;
            font-size: 24px;
            line-height: 40px;
            text-align: right;
        }
        
        .content .main .year h2 a {
            color: #58a6fb;
        }
        
        .content .main .year h2 i {
            display: block;
            position: relative;
            height: 0;
            width: 0;
            left: 190px;
            top: -20px;
            border-width: 6px;
            border-style: solid;
            border-color: #59a7fb transparent transparent transparent;
            -webkit-transition: .5s;
            -moz-transition: .5s;
            -ms-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            -webkit-transform-origin: 6px 3px;
            -moz-transform-origin: 6px 3px;
            -ms-transform-origin: 6px 3px;
            -o-transform-origin: 6px 3px;
            transform-origin: 6px 3px
        }
        
        .content .main .year .list {
            margin: 10px 0;
            position: relative;
            overflow: hidden;
            -webkit-transition: height 1s cubic-bezier(0.025, 0.025, 0.000, 1.115), opacity 1s;
            -moz-transition: height 1s cubic-bezier(0.025, 0.025, 0.000, 1.115), opacity 1s;
            -ms-transition: height 1s cubic-bezier(0.025, 0.025, 0.000, 1.115), opacity 1s;
            -o-transition: height 1s cubic-bezier(0.025, 0.025, 0.000, 1.115), opacity 1s;
            transition: height 1s cubic-bezier(0.025, 0.025, 0.000, 1.115), opacity 1s
        }
        
        .content .main .year .list ul {
            bottom: 0;
            position: absolute;
        }
        
        .content .main .year .list ul li {
            background: url(images/circle.png) no-repeat 235px 31px;
            padding: 30px 0;
            color: #a1a4b8;
        }
        
        .cls {
            zoom: 1;
        }
        
        .cls:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .content .main .year .list ul li .date {
            font-size: 18px;
            line-height: 32px;
            color: #bec1d5
        }
        
        .content .main .year .list ul li .intro {
            font-size: 18px;
            line-height: 32px;
            color: #63d029;
        }
        
        .content .main .year .list ul li .date,
        .content .main .year .list ul li .version {
            float: left;
            display: block;
            clear: left;
            width: 200px;
            line-height: 24px;
            text-align: right
        }
        
        .content .main .year .list ul li .intro,
        .content .main .year .list ul li .more {
            float: left;
            display: block;
            width: 400px;
            margin-left: 100px;
            line-height: 24px;
        }
        
        .content .wrapper:first-child .main .year.close h2 i {
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg)
        }
        
        .content .wrapper:first-child .main .year.close .list {
            opacity: 0;
            height: 0 !important;
        }
        a{
            color: #bec1d5;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="wrapper">
            <!--这里是灯光 -->
            <div class="light"><i></i></div>
            <!--双线-->
            <hr class="line-left" />
            <hr class="line-right" />
            <!--主题内容开始,main的线背景-->
            <div class="main">
                <!--标题-->
                <h1 class="title">我的时间轴</h1>
                <!--年份开始,除了wrapper,main,year其余的所有都是绝对定位 -->
                <div class="year">
                    <h2><a href="#">2017年<i></i></a></h2>
                    <div class="list">
                        <ul>
                            <li class="cls">
                                <p class="date">3月16号</p>
                                <p class="intro">小米商城</p>
                                <p class="version">&nbsp;</p>
                                <div class="more">
                                    <p><a href="小米商城/index.html">小米商城</a></p>
                                    <!--<p>我的内容2</p>
                                    <p>我的内容3</p>
                                    <p>我的内容4</p>
                                    <p>我的内容5</p>-->
                                </div>
                            </li>
                            <li class="cls">
                                <p class="date">2月26号</p>
                                <p class="intro">我的标题是什么</p>
                                <p class="version">&nbsp;</p>
                                <div class="more">
                                    <p><a href="项目/index.html">导航条</a></p>
                                    <!--<p>我的内容2</p>
                                    <p>我的内容3</p>
                                    <p>我的内容4</p>
                                    <p>我的内容5</p>-->
                                </div>
                            </li>
                            <li class="cls">
                                <p class="date">2月22号</p>
                                <p class="intro">小dome</p>
                                <p class="version">&nbsp;</p>
                                <div class="more">
                                    <p><a href="2月/订单.html">订单</a></p>
                                    <p><a href="2月/选项卡.html">选项卡</a></p>
                                    <p><a href="2月/下拉菜单.html">下拉菜单</a></p>
                                    <p><a href="2月/模拟select.html">模拟select</a></p>
                                    <p><a href="2月/鼠标放上去显示遮罩层.html">鼠标放上去显示遮罩层</a></p>
                                    <p><a href="2月/轮播图2.html">轮播图</a></p>
                                    <p><a href="2月/图片切换.html">图片切换</a></p>
                                    <p><a href="2月/图片翻转 切换1.html">图片翻转 切换</a></p>
                                    <p><a href="2月/置顶效果.html">置顶效果</a></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    $(".main .year .list").each(function (index, target) {
        var div = $(target), ul = div.find("ul")
        div.height(ul.outerHeight());
    });
    $(".main .year>h2>a").click(function (e) {
        e.preventDefault();
        $(this).parents(".year").toggleClass("close");
    });

</script>